<template>
  <div class="d2-page-cover" style="margin:middle">
    <el-aside width="20%" class="left">
      <div class="left_today">
        <h4 style="text-align:center;">进入进件数据</h4>
        <el-row v-for="(item,index) in todays" v-bind:key="index">
          <el-col :span="18">
            <div class="grid-content bg-purple">{{item.name}}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple-light">{{item.value}}</div>
          </el-col>
        </el-row>
      </div>
      <div class="left_interface">
        <div :style="{height:'220px',width:'100%'}" ref="admittance"></div>
      </div>
      <div class="left_footer">
        <div :style="{height:'220px',width:'100%'}" ref="antiFraud"></div>
      </div>
    </el-aside> 
    <el-main class="echarts">
      <div class="main">
        <div :style="{height:'400px',width:'100%'}" ref="myEchart"></div>
      </div>
      <div class="footer">
        <div :style="{height:'400px',width:'100%'}" ref="pfUser"></div>
      </div> 
       <div class="footer">
        <div :style="{height:'400px',width:'100%'}" ref="specificIndex"></div>
      </div>
    </el-main>
    <el-aside width="20%" class="right">
      <div class="right_alarm">
        <h4 style="text-align:center;">当前告警</h4>
        <el-row>
          <el-col :span="8">
            <div class="grid-content bg-purple">事件</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">类型</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">级别</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">操作</div>
          </el-col>
        </el-row>
        <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
          <li v-for="(item,index) in alarms" v-bind:key="index" class="infinite-list-item">
            <el-row v-if="item.level=='高'" style="color:red;">
              <el-col :span="8">
                <div class="grid-content bg-purple">{{item.name}}</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple-light">{{item.value}}</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple-light">{{item.value}}</div>
              </el-col>
              <el-col :span="4">
                <el-button type="text" size="small" @click="lookDetail(item.value)">查看</el-button>
              </el-col>
            </el-row>
            <el-row v-else-if="item.level=='中'" style="color:#f5ad61;">
              <el-col :span="8">
                <div class="grid-content bg-purple">{{item.name}}</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple-light">{{item.value}}</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple-light">{{item.value}}</div>
              </el-col>
              <el-col :span="4">
                <el-button type="text" size="small" @click="lookDetail(item.value)">查看</el-button>
              </el-col>
            </el-row>
            <el-row v-else>
              <el-col :span="8">
                <div class="grid-content bg-purple">{{item.name}}</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple-light">{{item.value}}</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple-light">{{item.value}}</div>
              </el-col>
              <el-col :span="4">
                <el-button type="text" size="small" @click="lookDetail(item.value)">查看</el-button>
              </el-col>
            </el-row>
          </li>
        </ul>
      </div>
      <div class="right_footer">
        <label>
          当前待处理告警数：
          <span>25</span>
        </label>
        <el-button class="button" type="primary">告警处理</el-button>
      </div> 
    </el-aside> 

  </div>

</template>
<script>

import echarts from "echarts";
import china from "./../../../../../map/china.json";
import $ from "jquery";
export default {
  data() {
    return {
      chart: null,
      todays: [
        { name: "评分用户数", value: "12,000" },
        { name: "准入进件数", value: "12,000" },
        { name: "准入拒绝数", value: "2,000" },
        { name: "反欺诈进件数", value: "12,000" },
        { name: "反欺诈拒绝数", value: "1,000" }
      ],
      interfaces: [
        { name: "实名OCR数", value: "12,000" },
        { name: "手持认证数", value: "12,000" },
        { name: "同盾接口执行数 ", value: "2,000" },
        { name: "同盾缺失数", value: "1,000" },
        { name: "智策接口执行数 ", value: "1,000" },
        { name: "智策缺失数 ", value: "1,000" },
        { name: "群星接口执行数 ", value: "1,000" },
        { name: "群星接口缺失数  ", value: "1,000" }
      ],
      alarms: [
        { name: "实名OCR数", value: "12,000", level: "高" },
        { name: "手持认证数", value: "12,000", level: "高" },
        { name: "同盾接口执行数 ", value: "2,000", level: "中" },
        { name: "同盾缺失数", value: "1,000", level: "低" },
        { name: "智策接口执行数 ", value: "1,000", level: "低" },
        { name: "智策缺失数 ", value: "1,000", level: "低" },
        { name: "群星接口执行数 ", value: "1,000", level: "低" },
        { name: "群星接口缺失数  ", value: "1,000", level: "低" }
      ]
    };
  },
  mounted() {
    $(".d2-container-full__body").css("background-color", "#002253");
    this.admittance();
    this.antiFraud();
    this.chinaConfigure();
    this.scoringUser();
    //this.specificIndex();
  },
  beforeDestroy() {
    console.log(" ==================== beforeDestroy ================= ");
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    antiFraud() {
      let antiFraud = echarts.init(this.$refs.antiFraud); //这里是为了获得容器所在位置
      window.onresize = antiFraud.resize;
      let option = {
        title: {
          text: "反欺诈拒绝分布",
          //subtext: "虚构数据",
          left: "center",
          textStyle: {
            fontWeight: "normal",
            color: "#fff",
            fontSize: 18
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        series: [
          {
            name: "反欺诈来源",
            type: "pie",
            radius: ["50%", "70%"],
            center: ["50%", "50%"],
            selectedMode: "single",
            label: {
              normal: {
                show: true,
                position: "inside",
                formatter: "{b}:{c}({d}%)", //模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比

                // textStyle: {
                //   align: "center",
                //   baseline: "middle",
                //   fontFamily: "微软雅黑",
                //   fontSize: 15,
                //   fontWeight: "bolder"
                // }
              }
            },
            data: [
              { value: 1548, name: "身份证命中法院执行" },
              { value: 535, name: "1天内身份证或手机号" },
              { value: 510, name: "身份证命中法院执行" },
              { value: 634, name: "身份证命中法院执行" },
              { value: 634, name: "身份证命中法院执行" },
              { value: 735, name: "其他" }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      antiFraud.setOption(option);
      window.addEventListener("resize", () => {
        antiFraud.resize();
      });
    },
    admittance() {
      let admittance = echarts.init(this.$refs.admittance); //这里是为了获得容器所在位置
      window.onresize = admittance.resize;
      let option = {
        title: {
          text: "准入拒绝分布",
         // subtext: "虚构数据",
          left: "center",
          textStyle: {
            fontWeight: "normal",
            color: "#fff",
            fontSize: 18
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        series: [
          {
            name: "准入来源",
            type: "pie",
            radius: ["50%", "70%"],
            center: ["50%", "50%"],
            selectedMode: "single",
            label: {
              normal: {
                show: true,
                position: "inside",
                formatter: "{b}:{c}({d}%)", //模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比

                // textStyle: {
                //   align: "center",
                //   baseline: "middle",
                //   fontFamily: "微软雅黑",
                //   fontSize: 15,
                //   fontWeight: "bolder"
                // }
              }
            },
            data: [
              { value: 1548, name: "IP黑名单" },
              { value: 535, name: "手机黑名单" },
              { value: 510, name: "身份证黑名单" },
              { value: 634, name: "区域限制" },
              { value: 634, name: "年龄" },
              { value: 735, name: "其他" }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      admittance.setOption(option);
      window.addEventListener("resize", () => {
        admittance.resize();
      });
    },
    chinaConfigure() {
      let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
      //window.onresize = myChart.resize;
      echarts.registerMap("china", china);
      myChart.setOption({
        // 进行相关配置
        backgroundColor: "transparent",
        tooltip: {}, // 鼠标移到图里面的浮动提示框
        dataRange: {
          show: false,
          min: 0,
          max: 1000,
          text: ["High", "Low"],
          realtime: true,
          calculable: true,
          color: ["orangered", "yellow", "lightskyblue"]
        },
        geo: {
          // 这个是重点配置区
          map: "china", // 表示中国地图
          roam: true,
          label: {
            normal: {
              show: true, // 是否显示对应地名
              textStyle: {
                color: "rgba(0,0,0,0.4)"
              }
            }
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)"
            },
            emphasis: {
              areaColor: null,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        },
        series: [
          {
            type: "scatter",
            coordinateSystem: "geo" // 对应上方配置
          },
          {
            name: "启动次数", // 浮动框的标题
            type: "map",
            geoIndex: 0,
            data: [
              {
                name: "北京",
                value: 599
              },
              {
                name: "上海",
                value: 142
              },
              {
                name: "黑龙江",
                value: 44
              },
              {
                name: "深圳",
                value: 92
              },
              {
                name: "湖北",
                value: 810
              },
              {
                name: "四川",
                value: 453
              }
            ]
          }
        ]
      });
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    scoringUser() {
      let pfUser = echarts.init(this.$refs.pfUser); //这里是为了获得容器所在位置
      //window.onresize = pfUser.resize;
      let option = {
        title: {
          text: "进件趋势",
          textStyle: {
            fontWeight: "normal",
            color: "#fff",
            fontSize: 18
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          data: ["评分用户准入进件"],
          textStyle: {
            color: "#ec808d"
          }
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["10.1", "10.2", "10.3", "10.4", "10.5", "10.6", "10.7"],
            axisLabel: {
              show: true,
              textStyle: {
                color: "#ccc"
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              show: true,
              textStyle: {
                color: "#ccc"
              }
            }
          }
        ],
        series: [
          {
            name: "评分用户准入进件",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [120, 132, 101, 134, 90, 230, 210]
          }
        ]
      };
      pfUser.setOption(option);
      window.addEventListener("resize", () => {
        pfUser.resize();
      });
    },
    specificIndex() {
      let specificIndex = echarts.init(this.$refs.specificIndex); //这里是为了获得容器所在位置
      window.onresize = specificIndex.resize;
      let option = {
        title: {
          text: "特定指标",
          textStyle: {
            color: "#ccc"
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        // legend: {
        //   data: ["智策接口", "智策缺失", "群星接口", "群星缺失"],
        //   textStyle: {
        //     color: "#ec808d"
        //   }
        // },
        legend: {
          data: [
            {
              name: "智策接口",
              textStyle: {
                color: "#ec808d"
              }
            },
            {
              name: "智策缺失",
              textStyle: {
                color: "#ccc"
              }
            },
            {
              name: "群星接口",
              textStyle: {
                color: "#ec808d"
              }
            },
            {
              name: "群星缺失",
              textStyle: {
                color: "#ec808d"
              }
            }
          ]
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["10.1", "10.2", "10.3", "10.4", "10.5", "10.6", "10.7"],
            axisLabel: {
              show: true,
              textStyle: {
                color: "#ccc"
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              show: true,
              textStyle: {
                color: "#ccc"
              }
            }
          }
        ],
        series: [
          {
            name: "智策接口",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: "智策缺失",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: "群星接口",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: "群星缺失",
            type: "line",
            stack: "总量",
            areaStyle: { normal: {} },
            data: [320, 332, 301, 334, 390, 330, 320]
          }
        ]
      };
      specificIndex.setOption(option);
      window.addEventListener("resize", () => {
        specificIndex.resize();
      });
    },
    load() {
      // let obj = new Object();
      // obj.name = "告警";
      // obj.value = "111";
      // obj.level = "低";
      // this.alarms.push(obj);
    },
    lookDetail(value) {
      this.$message({
        message: "恭喜你，这是一条成功消息:" + value,
        type: "success"
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.left {
  float: left;
  width: 20%;
}
.echarts {
  float: left;
  width: 60%;
}
.right {
  float: right;
  width: 20%;
}
.footer {
  margin-top: 30px;
}
.left_today {
  margin-top: 20px;
  border: 1px solid slategray;
  padding: 20px 10px 30px 10px;
  color: #ccc;
}
.left_interface {
  margin-top: 20px;
  border: 1px solid slategray;
  padding: 10px 10px 10px 10px;
  color: #ccc;
}
.left_footer{
   margin-top: 20px;
  border: 1px solid slategray;
  padding: 10px 10px 10px 10px;
  color: #ccc;
}
.left_today > .el-row {
  margin-top: 10px;
  border: 1px solid slategray;
  padding: 10px 5px 10px 5px;
  border-radius: 5px;
}
.left_interface > .el-row {
  margin-top: 10px;
  border: 1px solid slategray;
  padding: 10px 5px 10px 5px;
  border-radius: 5px;
}
.right_alarm {
  margin-top: 20px;
  border: 1px solid slategray;
  padding: 20px 10px 30px 10px;
  color: #ccc;
}
.right_alarm .el-row {
  margin-top: 10px;
  border: 1px solid slategray;
  padding: 10px 5px 10px 5px;
  border-radius: 5px;
}
.infinite-list {
  height: 623px;
}
.right_footer {
  margin-top: 20px;
  border: 1px solid slategray;
  padding: 20px 10px 30px 10px;
  color: #ccc;
}
.right_footer > .button {
  margin-left: 20px;
  padding: 10px 10px 10px 10px;
}
.main {
  border: 1px solid slategray;
  border-radius: 5px;
  background-color: #002253;
  box-shadow: 1px 1px 10px 1px inset;
}
.footer {
  border: 1px solid slategray;
  border-radius: 5px;
  box-shadow: 1px 1px 10px 1px inset;
  padding: 10px 5px 10px 5px;
}
</style>

